<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路由初步</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <style>
        .box{
            width:300px;
            height:300px;
            border-radius: 20px;
            border:1px solid darkkhaki;
            margin: 20px;
            padding:30px;
            cursor: pointer;
            
        }
        .router-link-exact-active , .router-link-active{
            color:brown;
            font-size: 30px;
            font-weight: 800;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>title = {{ title}} </h2>
        <!-- 5. 路由出口  路由匹配到的组件将渲染在这里  展示组件内容 -->
        <div class="box">
            <router-view></router-view>
        </div>

        <!-- 6.  路由导航 -->
        <p>
            <router-link to="/home">首页</router-link>
            <router-link to="/find">发现</router-link>
            <router-link to="/demo">案例</router-link>
            <router-link to="/mine">我的</router-link>

        </p>
    </div>

    <template id="home">
        <div>
            <h2>Home - home - 首页 </h2>
        </div>
    </template>
    <script>
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)   脚手架 vite 

        // 1.  定义 (路由) 组件。
        const Home = {
            template:"#home"
        }
        const Find = {
            template:"<h2>Find - FInd -  发现春天的美丽 </h2>",
            data(){
                return {

                }
            },
            methods:{}
        }
        const Mine = {
            template:"<h2>Mine - Mine - 个人中心 </h2>"
        }
        const Demo = {
            template:"<h2>Demo - Demo - 测试案例  </h2>"
        }
        const NotFound = {
            template:"<h2>NotFound - NotFound - 404  </h2>"
        }
        // 2. 定义路由
        // 每个路由应该映射一个组件。 
        const routes = [
            {
                path:"/",
                redirect:'/home'
            },
            {
                path:'/home',
                component:Home 
            },
            {
                path:'/find',
                component:Find 
            },
            {
                path:'/mine',
                component:Mine 
            },
            {
                path:'/demo',
                component:Demo  
            },
            {
                path:"/404",
                component:NotFound,
            },
            {
                path:"*",
                redirect:"/404" 
            }
        ]

        // 3. 创建 router 实例，然后传 `routes` 配置
        const router = new VueRouter({
            routes:routes 
        })

        // 4. 创建和挂载根实例。
        const vm = new Vue({
            el:"#app",
            router, // this.$router 获取全局的路由对象 
            data:{
                title:"路由初步学习 "
            }
        })
    </script>

      <!-- 
        Vue路由 
        node 路由 根据不同的url接口 返回对应的不同的数据或者页面  (Later)

        Vue 路由 router 根据不同的url路径 pathname  匹配路由里面的 path 匹配成功就加载对应的组件(component)
   
        根据不同的浏览器地址url 匹配成功就加载对应的 组件 

        Vue-Router 是 Vue.js 官方的路由管理器。

        它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

        路由作用 实现构建单页面应用  index.html 其他页面 组件形式加载

        single-page-application     (SPA)     单页面应用   

        将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

        a. 掌握 配置最基本的路由 流程
        b. 路由传递参数  动态路由
        c. 嵌套路由
     -->
</body>
</html>